<template>
	<view class="main-page">
		<u-navbar title="车辆详情" :autoBack="true" placeholder></u-navbar>
		<view class="image">
			<image :src="detail.image" mode="aspectFill"></image>
		</view>
		<view class="tab-container">
			<u-tabs :list="tabs" @click="tabClick"></u-tabs>
			<view class="tab-content">
				<view class="tab-item" v-if="tabIndex == 0">
					<view class="orders-items">
						<view class="order-item" v-for="item,index in orders" @tap="toDetail(item)">
							<view class="text-item name">
								<view class="">
									{{ item.tenant_name }} {{ item.tenant_phone }}
								</view>
								<view class="price">
									{{item.amount}}
								</view>
							</view>
							<view class="text-content">
								<view class="text-content-info">
									<view class="text-item start-address">
										取车：{{item.start_address}}{{item.start_address_detail}}<u--text mode="date" :text="item.start_date" format="yyyy-mm-dd" size="13" customStyle="padding-left: 12rpx;"></u--text>
									</view>
									<view class="text-item start-address">
										还车：{{item.end_address}}&nbsp;&nbsp;&nbsp;&nbsp;{{item.daylen}}天
									</view>
								</view>
								<view class="status">
									<u--text type="info" text="已完成" v-if="item.order_status == 2" size="12"></u--text>
									<u--text type="success" text="进行中" v-else  size="12"></u--text>
								</view>
							</view>
						</view>
						<u-empty mode="data" v-if="orders.length == 0"></u-empty>
					</view>
				</view>
				<view class="tab-item" v-if="tabIndex == 1">
					<view class="detail-table">
						<view class="detail-table-tr">
							<view class="detail-table-tr-label">
								品牌
							</view>
							<view class="detail-table-tr-value">
								{{detail.brand}}
							</view>
						</view>
						<view class="detail-table-tr">
							<view class="detail-table-tr-label">
								车型名称
							</view>
							<view class="detail-table-tr-value">
								{{detail.name}}
							</view>
						</view>
						<view class="detail-table-tr">
							<view class="detail-table-tr-label">
								颜色
							</view>
							<view class="detail-table-tr-value">
								{{detail.color}}
							</view>
						</view>
						<view class="detail-table-tr">
							<view class="detail-table-tr-label">
								车牌号
							</view>
							<view class="detail-table-tr-value">
								{{detail.car_no}}
							</view>
						</view>
						<view class="detail-table-tr">
							<view class="detail-table-tr-label">
								动力类型
							</view>
							<view class="detail-table-tr-value">
								{{detail.power_type}}
							</view>
						</view>
						<view class="detail-table-tr">
							<view class="detail-table-tr-label">
								油箱大小
							</view>
							<view class="detail-table-tr-value">
								{{detail.tank_size}}
							</view>
						</view>
						<view class="detail-table-tr">
							<view class="detail-table-tr-label">
								汽油标号
							</view>
							<view class="detail-table-tr-value">
								{{detail.petrol}}
							</view>
						</view>
						<view class="detail-table-tr">
							<view class="detail-table-tr-label">
								车架号
							</view>
							<view class="detail-table-tr-value">
								{{detail.frame}}
							</view>
						</view>
						<view class="detail-table-tr">
							<view class="detail-table-tr-label">
								发动机号
							</view>
							<view class="detail-table-tr-value">
								{{detail.engine_no}}
							</view>
						</view>
						<view class="detail-table-tr">
							<view class="detail-table-tr-label">
								座位数
							</view>
							<view class="detail-table-tr-value">
								{{detail.staets}}
							</view>
						</view>
						<view class="detail-table-tr">
							<view class="detail-table-tr-label">
								挡位类型
							</view>
							<view class="detail-table-tr-value">
								{{detail.car_type}}
							</view>
						</view>
						<view class="detail-table-tr">
							<view class="detail-table-tr-label">
								驾照要求
							</view>
							<view class="detail-table-tr-value">
								{{detail.car_license}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="btn-item-space"></view>
		<view class="btn-item" v-if="detail.status == 1">
			<u-button class="bg-linear-main" type="primary" shape="circle" text="车辆出租" @tap="toOrder"></u-button>
		</view>
	</view>
</template>

<script>
	import { carOrders } from '@/common/api.js'
	
	export default {

		data() {
			return {
				tabIndex: 0,
				tabs: [
					{name: "出租记录"},
					{name: "车辆详情"}
				],
				detail: {},
				orders: []
			}
		},
		onLoad() {
			this.detail = uni.getStorageSync('$tempData');
		},
		onShow() {
			this.getOrders();
		},
		methods: {
			getOrders(){
				carOrders({car_id: this.detail.id}).then(res => {
					this.orders = res.list;
				})
			},
			tabClick(event){
				this.tabIndex = event.index;
			},
			toDetail(item) {
				uni.navigateTo({
					url: '/pages/home/orderDetail?no='+item.no
				})
			},
			toOrder() {
				uni.navigateTo({
					url: '/pages/home/addOrder?car_id='+this.detail.id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.image {
		width: 750rpx; height: 480rpx;
		image {
			height: inherit; width: inherit;
		}
	}
	.detail-table{
		font-size: 25rpx; padding: 25rpx; background-color: #eee;
		&-tr {
			display: flex; justify-content: space-between; padding: 9rpx;
			&-label {
				
			}
			&-value {
				
			}
		}
	}
	.orders-items {
		.order-item {
			font-size: 25rpx; background-color: #f2f2f2; padding: 25rpx; position: relative;
			.text-item { 
				display: flex; justify-content: space-between;padding: 5rpx 0;
			}
			.text-content {
				display: flex; justify-content: space-between;
				.text-content-info { flex: 1; }
				.status { font-size: 28rpx; display: flex; align-items: center;}
			}
			.name {}
			.price { font-size: 32rpx; font-weight: 600; color: #f60; }
			.price::before { content: "￥";color: #f60; font-size: 26rpx;}
		}
		.order-item + .order-item::after { 
			content: " "; display: block; position: absolute; left: 25rpx; top: 0; width: calc(100% - 50rpx);height: 2rpx; background-color: #ccc;
		}
	}
	.btn-item-space { height: 160rpx; width: 100%; }
	.btn-item { position: fixed; left: 0; right: 0;bottom: 0; padding: 40rpx; }
</style>
